<template>
  <div class="gird-nine">
    <div class="i-card" v-for="item in girdNine">
      <div class="name">{{ item.name }}</div>
      <div class="value">
        <span class="va">{{ item.value }}</span
        ><span class="unit">{{ item.unit }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const girdNine = ref([
  {
    name: "累计建成",
    value: 33,
    unit: "万亩",
  },
  {
    name: "全市在建",
    value: 6,
    unit: "个",
  },
  {
    name: "计划建设",
    value: 1,
    unit: "个",
  },
]);
</script>

<style scoped lang="scss">
.gird-nine {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  color: #fff;

  .i-card {
    padding: 10px;
    padding-left: 20px;
    border-radius: 4px;

    .name {
      font-family: fan;
      font-size: 18px;

      &::before {
        display: inline-block;
        width: 12px;
        height: 10px;
        margin-right: 5px;
        margin-left: -12px;
        content: "";
      }
    }

    .value {
      padding-left: 5px;
      line-height: 1;

      .va {
        font-size: 36px;
        font-weight: bold;
      }

      .unit {
        margin-left: 6px;
        font-size: 12px;
      }
    }

    &:nth-child(-n + 3) {
      background-color: rgb(40 235 228 / 20%);

      .name {
        &::before {
          background: url("@/assets/construct/datd_bg_triangleb.png") no-repeat;
        }
      }

      .value {
        color: #28ebe4;
      }
    }

    &:nth-child(-n + 6):nth-child(n + 4) {
      background-color: rgb(227 196 97 / 20%);

      .name {
        &::before {
          background: url("@/assets/construct/datd_bg_triangley.png") no-repeat;
        }
      }

      .value {
        color: #e4c561;
      }
    }

    &:nth-child(-n + 9):nth-child(n + 7) {
      background-color: rgb(62 223 148 / 20%);

      .name {
        &::before {
          background: url("@/assets/construct/datd_bg_triangleg.png") no-repeat;
        }
      }

      .value {
        color: #3ee095;
      }
    }
  }
}
</style>
